/*
* Respond To
* Copied from UtilityBelt- https://github.com/dmtintner/UtilityBelt
*/
$smartphone: 480px;
$tabletPortrait: 767px;
$tabletLandscape: 1024px;
$desktop: 1174px;
$largeScreen: 1400px;
@mixin respondTo($media) {
  @if $media == smartphone {
    @media (max-width: $smartphone) {
      @content;
    }
  } @else if $media == tablet {
    @media (min-width: $tabletPortrait) and (max-width: $tabletLandscape) {
      @content;
    }
  } @else if $media == smallScreen {
    @media (max-width: $desktop) {
      @content;
    }
  } @else if $media == desktop {
    @media (min-width: $desktop) {
      @content;
    }
  }
}

@mixin triangle($direction, $size: 8px, $color: #222) {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  @if $direction == "up" {
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: none;
  } @else if $direction == "down" {
    border-top: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: none;
  } @else if $direction == "left" {
    border-right: $size solid $color;
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: none;
  } @else if $direction == "right" {
    border-left: $size solid $color;
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: none;
  }
}

/*
* SCSS Tooltips
* $direction: ne, nw, se, sw. relative to the element the tooltip is on
* $bg-color: background color of the tooltip
* Content for tooltip comes from data-tooltip attribute on element
*/
@mixin tooltip($direction: "nw", $bg-color: #000) {
  $triangle-size: 6px;
  $border-radius: 3px;
  $tooltip-width: 200px;
  $fade: 300ms;
  $white: #fff;
  $black: #000;

  position: relative;

  &::before,
  &::after {
    opacity: 0;
    z-index: 98;
    transition: opacity $fade, visibility 0ms linear $fade;
    pointer-events: none;
    @include respondTo(smartphone) {
      display: none;
    }
  }

  &::before {
    content: attr(data-tooltip);
    position: absolute;
    width: $tooltip-width;
    padding: 10px 15px;
    line-height: 18px;
    text-align: left;
    font-size: 13px;
    font-weight: normal;
    word-spacing: normal;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: $border-radius;
    background-color: $bg-color;
    @if lightness($bg-color) < 50% {
      color: $white;
    } @else {
      color: $black;
    }
  }
  &::after {
    content: "";
  }
  @if $direction == "nw" or $direction == "ne" {
    &::before {
      top: -($triangle-size + 3px);
      bottom: auto;
      transform: translateY(-100%);
    }
    &::after {
      @include triangle(down, $triangle-size, $bg-color);
      top: -($triangle-size + 3px);
      bottom: auto;
    }
  } @else if $direction == "sw" or $direction == "se" {
    &::before {
      bottom: -($triangle-size + 3px);
      top: auto;
      transform: translateY(100%);
    }
    &::after {
      @include triangle(up, $triangle-size, $bg-color);
      bottom: -($triangle-size + 3px);
      top: auto;
    }
  }
  @if $direction == "ne" or $direction == "se" {
    &::before,
    &::after {
      left: 50%;
      right: auto;
      margin-left: -$triangle-size;
    }
    &::before {
      margin-left: -$triangle-size * 3;
    }
  } @else if $direction == "nw" or $direction == "sw" {
    &::before,
    &::after {
      right: 50%;
      left: auto;
      margin-right: -$triangle-size;
    }
    &::before {
      margin-right: -$triangle-size * 3;
    }
  } @else {
    @warn "Direction not valid in tooltip mixin";
  }
  &:hover {
    &::before,
    &::after {
      opacity: 1;
      pointer-events: all;
      transition-delay: 0.01ms;
    }
  }
}
